import { useEffect, useState } from 'react'
import './index.scss'
import axios from '../../api/index'
import { useNavigate, useParams } from 'react-router-dom'
import dayjs from 'dayjs'

// 定义类型接口
interface Comment {
    headPic: string
    nickName: string
    commentTime: string
    content: string
}

interface ReceiveNum {
    receiveNum: number
}

interface DoctorData {
    imagePic: string
    doctorName: string
    jobTitle: string
    inauguralHospital: string
    praise: string
    serverNum: number
    receiveNum: ReceiveNum[]
    personalProfile: string
    goodField: string
    commentNum: number
    commentList: Comment[]
    servicePrice: number
}

function Ysxq() {
    const navigate = useNavigate()
    const [data, setData] = useState<DoctorData | null>(null)
    const { id } = useParams()
    // 获取医生详情数据
    useEffect(() => {
        axios.get('/user/inquiry/v1/findDoctorInfo',
            {
                params: {
                    doctorId: id
                }
            }
        ).then(res => {
            console.log(res);
            setData(res.data.result)
        })
    }, [id])
    return (
        <div className='ysxq'>
            <div className='ysxq-top'>
                <span><img src="../../../public/26.png" alt="" className='ysxq-top-tp' onClick={() => navigate(-1)} /></span>
                <span className='xq'>医生详情</span>
            </div>
            <div className='dbxq'>
                <div className='dbsj'>
                    <div className='top-sj'>
                        <span className='sj-left'><img src={data?.imagePic} alt="" width={'180px'} height={'180px'} className='ysxxz' /></span>
                        <span className='sj-right'>
                            <p><span className='xm'>{data?.doctorName}</span>
                                <span className='zc'>{data?.jobTitle}</span>
                                <span className='djtb'><img src="../../../public/27.png" alt="" className='dj' /></span>
                            </p>
                            <p className='jz'>
                                <span className='jzyy'>{data?.inauguralHospital}</span>
                            </p>
                            <p className='hp'>
                                <span>好评率 {data?.praise}</span>
                                <span className='good'>服务患者数 {data?.serverNum}</span>
                            </p>
                            <p className='lw'>
                                <span>他收到的礼物</span>

                            </p>
                            <div className='ds'>
                                <span>
                                    <img src='../../../public/28.png' alt="" width={'50px'} height={'50px'} />
                                    <div className='gift-count'>{data?.receiveNum && data.receiveNum[0] ? data.receiveNum[0].receiveNum : 0}</div>
                                </span>
                                <span>
                                    <img src="../../../public/30.png" alt="" width={'50px'} height={'50px'} />
                                    <div className='gift-count'>{data?.receiveNum && data.receiveNum[1] ? data.receiveNum[1].receiveNum : 0}</div>
                                </span>
                                <span>
                                    <img src="../../../public/29.png" alt="" width={'50px'} height={'50px'} />
                                    <div className='gift-count'>{data?.receiveNum && data.receiveNum[2] ? data.receiveNum[2].receiveNum : 0}</div>
                                </span>
                            </div>
                        </span>
                    </div>
                    <div className='bottom'>
                        <p >
                            <span>个人简介</span>
                        </p>
                        <p className='jjxq'>
                            <span>{data?.personalProfile}</span>
                        </p>
                        <p className='ly'>
                            <span>擅长领域</span>
                        </p>
                        <p className='lyxq'>
                            <span>{data?.goodField}</span>
                        </p>
                        <p className='pl'>
                            <span>用户评价 ({data?.commentNum}条评论)</span>
                        </p>
                        <div>
                            <div >
                                {
                                    (data?.commentList) &&
                                    data.commentList.map((item: Comment, index: number) => {
                                        return <div key={index}>
                                            <span ><img src={item.headPic} alt="" width={'50px'} height={'50px'} className='pltx' /></span>
                                            <span className='plmc'>{item.nickName}</span>
                                            <span className='plsj'>{dayjs(item.commentTime).format('YYYY-MM-DD')}</span>
                                            <p className='plnr'><span>{item.content}</span></p>
                                        </div>
                                    })
                                }
                            </div>
                            <div className='more-comments' onClick={()=>navigate(`/pllb/${id}`)}>
                                点击查看更多评论
                            </div>
                            <div className='price-row'>
                                <div className='price'>{data?.servicePrice}H币</div>
                                <div className='cta' onClick={()=>navigate('/zxun')}>立即咨询</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Ysxq